<template>
  <div>
    <a-form :model="form" layout="vertical" @submit-success="save">
      <a-form-item field="id" :rules="{ required: true, message: t['校验失败'] }" label="id">
        <a-input-number v-model="form.id" />
      </a-form-item>

      <a-form-item field="dpi" label="DPI">
        <a-input-number v-model="form.dpi" :min="50" />
      </a-form-item>

      <a-form-item
        field="color"
        :rules="{ required: true, message: t['校验失败'] }"
        :label="t['颜色']"
      >
        <a-radio-group v-model="form.color" :min="50">
          <a-radio v-for="(item, key) in deviceColorList" :key="key" :value="item.value">
            {{ t[item.label] }}
          </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        field="scale"
        :rules="{ required: true, message: t['校验失败'] }"
        :label="t['缩放']"
      >
        <a-input-number v-model="form.scale" :max="3" :min="0" :step="0.1" />
      </a-form-item>

      <a-form-item field="resolutionId" :label="t['尺寸']" required>
        <a-select v-model="form.resolutionId" :options="resolutionList"></a-select>
      </a-form-item>

      <a-form-item field="description" :label="t['描述']" required>
        <a-textarea v-model="form.description" :max-length="40"></a-textarea>
      </a-form-item>
      <a-form-item field="description" :label="t['旋转']" required>
        <a-radio-group v-model="form.flip" :options="translateOptions(isOptions)"></a-radio-group>
      </a-form-item>

      <a-divider />
      <a-form-item>
        <div class="text-right w-full">
          <a-button html-type="submit" type="primary">
            {{ t["保存"] }}
          </a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { createModal, updateModel } from "@/api/service/model/model";
import { queryResolution } from "@/api/service/priceTag/priceTag";
import { deviceColorList } from "@/data/options/selection";
import { list } from "../data/curd";
import { form, showForm } from "../data/form";

const t = translate("公共模块");
const loading = ref(false);

const resolutionList = ref();

const loadResolution = async () => {
  const data = await queryResolution();
  resolutionList.value = data.data.map((e) => {
    return {
      label: e.description,
      value: e.resolutionId
    };
  });
};
onMounted(() => {
  loadResolution();
});

const isOptions = [
  {
    label: "是",
    value: 1
  },
  {
    label: "否",
    value: 0
  }
];

const save = async () => {
  loading.value = true;
  if (form.value.createTime) {
    await updateModel(form.value);
  } else {
    await createModal(form.value);
  }
  loading.value = false;
  list();
  showForm.value = false;
};
</script>

<style lang="scss" scoped></style>
